<template>
    <div style="margin-right: 1%;display: flex;width: 100%;align-items: center;justify-content: space-between;">
        <div>
            <span class="hello-word">{{ sentence }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const currentTime = ref('');
let sentence = ref('');
let nickname = useUserStore().name

const updateTime = () => {
    const now = new Date();
    const hourNumber = now.getHours()
    setSentence(hourNumber)
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    currentTime.value = `${hours}:${minutes}:${seconds}`;
};

function setSentence(hour: number) {
    if (hour >= 5 && hour <= 11) {
        sentence.value = `${nickname}, 早上好，愿你的一天充满阳光和欢笑。☀️`
    } else if (hour >= 12 && hour <= 13) {
        sentence.value = `${nickname}, 午安！休息一下，继续加油！🛏️`
    } else if (hour >= 14 && hour <= 17) {
        sentence.value = `${nickname}, 下午过得怎么样？保持努力，一切皆有可能！🧠`
    } else if (hour >= 18 && hour <= 22) {
        sentence.value = `${nickname},晚上好！放松一下，尽情享受晚间时光吧！🎮`
    } else {
        sentence.value = `${nickname}, 为在凌晨工作的你点一盏灯~🕯️`
    }
}

const interval = setInterval(updateTime, 1000);

onMounted(() => {
    updateTime();
});

onBeforeUnmount(() => {
    clearInterval(interval);
});
</script>

<style scoped>
.hello-word {
    font-size: 20px;
    font-weight: bold;
}
</style>
